Responsive Navbar Builder (Advanced)
How to Use:
**Customize Content:**
**Brand Name:** Enter the text for your logo or site name.
**Menu Items:** Add, remove, or reorder menu links. You can **drag-and-drop** items!
**Sub-Menus:** Add **sub-menus** (for dropdowns) under any menu item.
**Links:** Set display text and an optional link (e.g., "#home", "https://example.com") for each item.
**Customize Styles:**
**Colors:** Change the navbar's background, text, hover, and toggle button colors.
**Padding & Font:** Adjust navbar padding and font size.
**Shadow:** Add a box-shadow to the navbar.
**Toggle Mobile Preview:** Use this button to see how the navbar will look on smaller screens, demonstrating its responsiveness.
**Live Preview:** Observe the navbar update in real-time. Test the mobile toggle here too!
**Copy Code:** Grab the generated HTML, CSS, and JavaScript code to integrate into your web project.
Customization
General Settings
Brand Name:
Navbar Background Color:
Navbar Text Color:
Link Hover Background:
Toggle Button Color:
Vertical Padding (px):
Horizontal Padding (px):
Base Font Size (px):
Box Shadow (e.g., 0 2px 5px rgba(0,0,0,0.2)):
Menu Items
Sub
Remove
Sub
Remove
Remove
Remove
Sub
Remove
Sub
Remove
Add Main Menu Item
Live Preview
Toggle Mobile Preview
Generated Code
Copy HTML
Copy CSS
Copy JavaScript